<!DOCTYPE html>
<html>

	<head lang="en">
		<meta charset="UTF-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			
			ul {
				list-style: none;
			}
			
			#box {
				width: 360px;
				border: 1px solid #ccc;
				margin: 100px auto;
				overflow: hidden;
			}
			
			#box img {
				vertical-align: middle;
			}
			
			#box ul {
				overflow: hidden;
				border-top: 1px solid #ccc;
			}
			
			#box li {
				float: left;
			}
		</style>
	</head>

	<body>
		<div id="box">
			<img src="images/01big.jpg" id="bigimg" alt="" />
			<ul id="itemList">
				<li><img src="images/01.jpg" alt="" /></li>
				<li><img src="images/02.jpg" alt="" /></li>
				<li><img src="images/03.jpg" alt="" /></li>
				<li><img src="images/04.jpg" alt="" /></li>
				<li><img src="images/05.jpg" alt="" /></li>
			</ul>
		</div>
		<script type="text/javascript">
			var box = document.getElementById("box");
			var item = document.getElementById("itemList");
			var bigimg = document.getElementById("bigimg");
			var items = item.getElementsByTagName('li');
			for(i = 0; i < items.length; i++) {
				items[i].index = i + 1;
				items[i].onmouseover = function() {
					bigimg.src = "images/0" + this.index + "big.jpg";
				}
			}
		</script>
	</body>

</html>